<template>
  <div class="container">

    <div class="my-title">

      <van-row justify="space-between" align="bottom">

        <van-col span="11">
          <div class="my-info">
            <div class="my-head">
              <img src="/images/no-head.png" />
            </div>
            <div id="div-username" class="my-nickName">{{ (info.username) ? (info.username.indexOf('@') > -1 ?
              info.username.split('@')[0] : info.username) : '未登陆' }}</div>
          </div>
        </van-col>

        <van-col span="6" style="padding-bottom: 8px;display: flex;justify-content: right;">
          <div class="logout" id="div-logout">
            <a href="#" @click="logout" style="text-decoration: none;color:white;padding-right: 8px;">退出登陆</a>
          </div>
        </van-col>

      </van-row>

      <!-- <van-cell center :title="info.dayStr" :value="info.actionStr" is-link to="/activate"></van-cell> -->
      <div style="margin-left: 16px;margin-right: 16px;margin-top: 40px;">
        <van-cell-group inset>
          <van-cell :value="info.actionStr" style="height: 40px;" center is-link to="/activate">
            <template #title>
              <div class="custom-title-container">
                <span class="title-deadline">{{ info.dayStr }}</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

    </div>

    <van-cell style="" title="客服电话" value="18584895195" />
    <van-cell title="客服邮箱" value="hyc_exam@outlook.com" />
    <img style="width: 65px;height: 65px;margin-top: 160px;" src="/favicon.png" />
    <p>汇文模拟答题</p>
    <p>版本：V1.0.0</p>
    <p style="margin-top: 42px;"></p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// console.log('My setup:')
let name = 'My'
let info = ref({})
// var tokenInfo = '{"username":"admin","token":"ec3c143bca34238a0093fc0b84030740"}'
const showInfo = () => {
  var tokenInfo = JSON.parse(localStorage.getItem('tokenInfo'))
  console.log('tokenInfo', tokenInfo);
  info.value = tokenInfo
  var days = 0
  if (tokenInfo.deadline) {
    const date = tokenInfo.deadline;
    console.log("date", date);
    const deadline = new Date(date).getTime();
    console.log('deadline', deadline);
    if (Date.now() < deadline) {
      const dayMills = 24 * 60 * 60 * 1000;
      const mills = deadline - Date.now();
      days = Math.floor(mills / dayMills);
    }
    // }
  }
  console.log("days", days);
  var dayStr = "";
  var actionStr = "";
  if (days > 0) {
    dayStr = days + "天后会员到期";
    actionStr = "续期";
  } else {
    dayStr = "当前未开通会员";
    actionStr = "开通";
  }
  info.value.dayStr = dayStr;
  info.value.actionStr = actionStr;
};
onMounted(() => {
  console.log('click')
  showInfo();
});

// console.log('info', info)

// const onClick = () => {
//   console.log('click')
//   localStorage.setItem('tokenInfo', '')
//   info.value = {}
//   router.push('/login.html');
// }
const logout = () => {
  localStorage.setItem('tokenInfo', '')
  info.value = {}
  window.location.href = '/login.html'
}
</script>
<script>
// function logout() {
//   localStorage.setItem('tokenInfo', '')
//   info.value = {}
//   window.location.href = '/login.html';
// }
</script>
<style lang="less">
.my-title {
  background: url("/images/bg.png") top no-repeat;
  background-size: 100%;
  height: 200px;
  color: #fff;
}

.my-info {
  display: flex;
  height: 48px;
  margin-top: 4vh;
}

.my-head {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background-color: #fff;
  margin-left: 4vh
}

.my-head img {
  width: 100%;
}

.my-nickName {
  line-height: 48px;
  font-size: 16px;
  margin-left: 7px;
}

.logout {
  display: flex;
  justify-content: right;
  right: 0;

  height: 32px;
  line-height: 32px;
  width: 100px;
  font-size: 16px;
  background: #1F84FF;
  border: 1px solid #5FA7FF;
  border-radius: 32px 0 0 32px;
  color: #fff;
}

.title-deadline {
  font-size: 16px;
  color: #FF0000;
}

/* 默认样式，用于大屏幕 */
.container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  /* 居中 */
}

/* 使用媒体查询，适用于小屏幕 */
@media (max-width: 767px) {
  .container {
    max-width: 100%;
    width: 100%;
    /* 占满宽度 */
    margin: 0;
    /* 去除 margin */
  }
}

.custom-title-container {
  display: flex;
  align-items: center;
  /* 使用 flex 垂直居中标题 */
}
</style>